<template>
    <el-aside width="260px" class="chat-list-box">
        <div class="chat-list-header">
          <!-- <el-input class="search-text" size="small" placeholder="搜索" v-model="searchText">
            <i class="el-icon-search el-input__icon" slot="prefix"> </i>
          </el-input> -->
        </div>
        <div class="chat-list-loading" v-if="loading" v-loading="true" element-loading-text="消息接收中..."
          element-loading-spinner="el-icon-loading" element-loading-background="#F9F9F9" element-loading-size="24">
        </div>
        <el-scrollbar class="chat-list-items" v-else>
          <div v-for="(chat, index) in friendsData" :key="index">
            <chat-item :chat="chat" :index="index"
              @click.native="onActiveItem(index)" @delete="onDelItem(index)" @top="onTop(index)"></chat-item>
          </div>
        </el-scrollbar>
      </el-aside>
  </template>

<script setup>
import { friendsData } from '../../fakedata'
import ChatItem from './ChatItem.vue'
// import ChatBox from './components/ChatBox.vue'
// import { useChatStore } from './store/chat'

//const chatStore = useChatStore()
const searchText = ref('')
const loading = ref(false)
const onActiveItem = (index) => {
  console.log(index,'dasd');
}   
const onDelItem = (index) => {
  console.log(index,'dasd');
}
const onTop = (index) => {
  console.log(index,'dasd');
}

</script>
<style lang="scss">
 .chat-list-box {
    display: flex;
    flex-direction: column;
    height: 90vh;
    background: var(--im-background);

    .chat-list-header {
      height: 50px;
      display: flex;
      align-items: center;
      padding: 0 8px;
    }

    .chat-list-loading {
      height: 50px;
      background-color: #eee;

      .el-icon-loading {
        font-size: 24px;
        color: var(--im-text-color-light);
      }

      .el-loading-text {
        color: var(--im-text-color-light);
      }

      .chat-loading-box {
        height: 100%;
      }
    }

  }
</style>